<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件的嵌套</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root" :x="x">
    <!--组件的嵌套-->
<!--    <school>-->
<!--    </school>-->
<!--    <hello></hello>-->
<!--    <app></app>-->
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const student = Vue.extend({
        template: `
           <div>
              <h2>学生姓名:{{ name }}</h2>
              <h2>学生年龄:{{ age }}</h2>

           </div>
        `,
        data(){
            return {
                name: 'JONE',
                age:13
            }
        },
    });

    const school = Vue.extend({
        template: `
          <div>
             <h1>学校名称:{{ name }}</h1>
             <h1>学校地址:{{ address }}</h1>
             <!--子组件注册给哪个父组件，就嵌套在哪个副组件里面--->
             <student></student>
          </div>
        `,

        data(){
            return {
                name: '武汉科技大学',
                address:'武汉'
            }
        },

        //组件嵌套
        //这里也是局部注册组件
        components: {
           student
        }
    });


      const hello = Vue.extend({
          template: `<h1>{{ msg }}</h1>`,
          data(){
              return {
                  msg: 'hello, my vue world',
              }
          },
      });


      const app = Vue.extend({
          template:`<div>
            <school></school>
            <hello></hello>
          </div>`,
          components:{
              school,
              hello
          }
      });

        new Vue({
        template: `<app></app>`,
        el:"#root",
        //注册组件(局部)
        components:{
            // //schoo组件与hello组件平级
            // school,
            // hello
            app,
        },
        data:{
            x:1,
        }
    });


</script>
</body>
</html>
